<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<div class="admin_field-complex" if="element.addButton">
    <div class="admin_field-complex-title">
        <span class="label" translate="'User Agent Rules'"></span>
    </div>

    <div class="admin_field-complex-elements">
        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
        <button attr="{disabled: disabled}"
                class="action-secondary"
                type="button"
                click="addChild.bind($data, false, false)">
            <span text="addButtonLabel"/>
        </button>
    </div>

    <div class="admin_field-complex-content"
         translate="'User agent exceptions override product and CMS pages rules.'"></div>
</div>

<div class="admin__field admin__field-wide"
     visible="visible"
     disabled="disabled"
     css="element.setClasses(element)"
     attr="'data-index': index">
    <label if="element.label" class="admin__field-label" attr="for: element.uid">
        <span text="element.label"/>
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <div class="admin__control-table-wrapper">
            <table class="admin__dynamic-rows data-grid" data-role="grid">
                <thead if="element.columnsHeader">
                    <tr>
                        <th if="dndConfig.enabled"
                            class="data-grid-draggable-row-cell"/>

                        <!-- ko foreach: {data: labels, as: 'item'}  -->
                        <th class="data-grid-th"
                            text="item.label"
                            visible="item.visible"
                            disabled="item.disabled"
                            css="$parent.setClasses(item)">
                        </th>
                        <!-- /ko -->
                    </tr>
                </thead>

                <tbody data-bind="foreach: elems">
                    <tr class="data-row"
                        css="'_odd-row': $index() % 2">
                        <td if="$parent.dndConfig.enabled"
                            class="data-grid-draggable-row-cell"
                            template="name: $parent.dndConfig.template, data: $parent.dnd"/>

                        <!-- ko foreach: { data: elems, as: 'elem'}  -->
                        <td if="elem.template"
                            visible="elem.visible"
                            disabled="elem.disabled"
                            css="$parents[1].setClasses(elem)"
                            template="elem.template"
                            attr="'data-index': index"/>
                        <!-- /ko -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="messages">
    <div class="message message-notice notice">
        <span
            translate="'Search strings are either normal strings or regular exceptions (PCRE). They are matched in the same order as entered.'"></span>
        <br>
        <span
            translate="'Examples'"></span>:
        <span class="code-sample">Firefox: /^mozilla/i</span>
    </div>
</div>
